<!DOCTYPE html>
<html>
    <head>
        <script src="../../jspsych.js"></script>
        <script src="../../plugins/jspsych-html-keyboard-response.js"></script>
        <link rel="stylesheet" href="../../css/jspsych.css">
        <style>
        #jspsych-html-keyboard-response-stimulus {
            font-size: 500%;
        }
        </style>
    </head>
    <body>
    </body>
    <script>
        var test_stimuli = [
          { stimulus: "<<<<<", data: { stim_type: 'congruent'} },
          { stimulus: ">>>>>", data: { stim_type: 'congruent'} },
          { stimulus: "<<><<", data: { stim_type: 'incongruent'} },
          { stimulus: ">><>>", data: { stim_type: 'incongruent'} }
        ];

        var test = {
          timeline: [{
            type: 'html-keyboard-response',
            choices: [37, 39],
            stimulus: jsPsych.timelineVariable('stimulus'),
            data: jsPsych.timelineVariable('data'),
            post_trial_gap: 1500,
            response_ends_trial: true
          }],
          timeline_variables: test_stimuli,
          sample: {type: 'fixed-repetitions', size: 2}
        };

        var debrief = {
          type: "html-keyboard-response",
          stimulus: function() {
            var congruent_rt = Math.round(jsPsych.data.get()
              .filter({stim_type: 'congruent'}).select('rt').mean());
            var incongruent_rt = Math.round(jsPsych.data.get().filter({stim_type: 'incongruent'}).select('rt').mean());
            return "<p style='font-size:25px'>Your average response time for congruent trials was <strong>" + congruent_rt + "ms</strong>.</p>"+
            "<p style='font-size:25px'>Your average response time for incongruent trials was <strong>" + incongruent_rt + "ms</strong>.</p>";
          }
        };

        var timeline = [];
        timeline.push(test);
        timeline.push(debrief);

        jsPsych.init({
            timeline: timeline,
            on_finish: function() {
                jsPsych.data.displayData();
            }
        });
    </script>
</html>